@import 'mo/style/common';

#{$scrollBar} {
    &__wrapper {
        height: 100%;
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    &__container {
        position: absolute;

        &--horizontal {
            display: flex;
            height: 100%;
        }

        &--vertical {
            width: 100%;
        }
    }

    &__track {
        background-color: transparent;
        margin: auto;
        position: sticky;
        transition: opacity 0.1s linear;
        z-index: 99;

        &--horizontal {
            height: 10px;
            left: 0;
            top: 100%;
            width: 100%;
        }

        &--vertical {
            height: 100%;
            left: 100%;
            top: 0;
            width: 10px;
        }

        &--hidden {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.8s linear;
        }
    }

    &__thumb {
        background-color: var(--scrollbarSlider-background);
        height: 100%;
        position: absolute;
        width: 100%;

        &:hover {
            background-color: var(--scrollbarSlider-hoverBackground);
        }

        &:active {
            background-color: var(--scrollbarSlider-activeBackground);
        }
    }

    &__shadow {
        box-shadow: var(--widget-shadow) 0 6px 6px -6px inset;
        height: 3px;
        position: sticky;
        top: 0;
        width: 100%;

        &--hidden {
            display: none;
        }
    }
}
